<html>
	<head>
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
		<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
		<style>
			html {
				zoom: 90%;
			}
			body {
				background: #e2e1e0;
				text-align: center;
				margin: 0px;
				padding: 0px;
				font-size: 9px;
				color: #555;
				font-family: Roboto;
				text-align: -webkit-center;
				
			}

			table {
				    margin: 10px;
				    position: relative;
				    left: -40px;
			}

			video {
				object-fit: cover;
				float: left;
				background: #fff;
				border-radius: 2px;
				display: inline-block;
				margin: 1rem;
				position: relative;
				width: 420px;
				box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
				transition: all 0.5s cubic-bezier(.25,.8,.25,1);
				padding:1px;
				bottom: 0px;
				height: 315px;
			}
			
			#container {
				top: 10px;
				left: 10px;
				margin: 0px;
				padding: 0px;
				width: 900px;
				
			}
			.container-video {
				width: 50%;
				float: left;
				display: inline-block;
				position: relative;
				font-size: 24px;
				top: 5px;
				margin-bottom: 10px;
			}

			.gaugeChartContainer {
				position: relative;
				width: 190px;
				height: 120px;
				float: left;
				padding: 10px;
			}

			.gaugeChart {
				position: relative;
				text-align: center;
			}

			.gaugeChart canvas {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
			}

			.gaugeChartLabel {
				display: inline-block;
				position: absolute;
				float: left;
				left: 0;
				top: 55px;
				width: 100%;
				text-align: center;
				color: #FFFFFF;
				font-size: 24px;
				font-weight: bold;
				z-index: 1;
				text-shadow: #333 0px 0px 2px;

			}
			.gaugeChartContainer {
				position: relative;
				font-size: 9px;
			}
			.gaugeChartTitle {
				display: inline-block;
				position: absolute;
				float: left;
				top: 0px;
				left: 0;
				width: 100%;
				text-align: center;
				color: #888;
				font-weight: bold;
				font-size: 12px;
			}

			.gaugeChartMin {
				display: inline-block;
				position: absolute;
				float: left;
				left: 0;
				bottom: 10%;
				width: 92%;
				margin-left: 8%;
				text-align: left;
				color: #888;
				font-weight: bold;
			}

			.gaugeChartMax {
				display: inline-block;
				position: absolute;
				float: left;
				left: 0;
				bottom: 10%;
				width: 95%;
				margin-right: 5%;
				text-align: right;
				color: #888;
				font-weight: bold;
			}
			td {
				margin: 5px;
				padding: 5px;
				text-align: center;
			}
			
			.ready-dialog 
			{
				width: 780px;
				text-align: left;
				
			}
			.ready-dialog p 
			{
				color: black;
				font-size: 12pt;
				
			}
			.ready-dialog code
			{
				font-size: 12pt;
				
			}
		</style>

		<script src="../js/gauge.min.js" type="text/javascript"></script>
		
	</head>
	<body>
		
	<div id="container">
		<div class="container-video">REMOTE
			<video id="remote"></video>
		</div>
		<dialog class="ready-dialog mdl-dialog">
		<h4 class="mdl-dialog__title">Ready to test H264 broadcasting?</h4>
		<div class="mdl-dialog__content">
			<p>
				This demo allows you to test the streaming capabilities of the Medooze Media Server.
			</p>
			<p>
				You will need to open an mp4 file with VLC and start streaming it with: 
			<pre>
				<code>	
:sout=#duplicate{dst=rtp{dst=your_ip_address,port=5004,sap,name=sergio},dst=display}
:no-sout-audio 
:sout-vide 
:sout-keep
				</code>
			</pre>
			</p>
		</div>
		<div class="mdl-dialog__actions">
			<button type="button" class="ready mdl-button mdl-button mdl-button--raised  mdl-button--accent">Ready!</button>
		</div>
	</dialog>	
	</body>

</html>	

<script src="js/broadcast.js" type="text/javascript"></script>